<template>
    <div class="register">
        <!-- 注册页 -->
        <h3>注册</h3>
        <van-form @submit="onSubmit">
            <van-field v-model="username" name="userName" placeholder="输入注册的手机号" />
            <van-field v-model="captcha" name="userCaptcha" placeholder="输入验证码" />
            <div class="captcha">
                <p v-if="time == 0" @click="getTime">| 获取验证码</p>
                <p v-else>{{ time }} 后重新发送</p>
            </div>
            <div class="message">
                <router-link class="link" to="/login">已存在账号，马上登录?</router-link>
            </div>
            <div style="margin: 16px; text-align: -webkit-center;">
                <van-button @click="onSubmit" :class="btn_color == true ? `active` : ''" round block type="info"
                    native-type="submit">注册</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import { Toast, Dialog } from 'vant';


// 打开页面时
// 初始化（获取存储在本地的所有用户信息）
let sky_users = []
let sky_users_str = localStorage.getItem("SKY_USERS")
if (sky_users_str) {
    // 如果本地有存储用户信息，就把这个存储信息的字符串转成数组
    sky_users = JSON.parse(sky_users_str)
}


export default {
    data() {
        return {
            btn_color: false,
            checked: false,
            time: 0,
            username: '',
            captcha: '',

        };
    },
    methods: {
        onSubmit(values) {
            console.log('submit', values);
            // 判断用户是否阅读平台协议
            let { userName, userCaptcha } = values;
            if (userName == "" || userCaptcha == "") {
                // 弹窗提示
                Toast.fail('输入框不能为空');
                // Toast('输入框不能为空~');
                this.btn_color = false;
                return false;
            }
            // 把用户信息放在本地（客户端）
            // 这个账号仅仅在我的电脑才有作用
            let arr = sky_users.filter(item => item.username == userName)

            // 如果数组的长度大于0 ，说明这个账号已经存在
            if (arr.length > 0) {
                Toast(`"${userName}"已存在，不需要重新注册`)
                this.btn_color = false;
            }
            else {
                // 用户输入手机号码格式11位数
                let regExp = /^1[345789][0-9]{9}/
                if (!regExp.test(userName)) {
                    Toast('请输入有效的手机号')
                    this.btn_color = false;
                    return false
                }

                if (userCaptcha.length != 6) {
                    Toast.fail('错误，请输入6位数验证码')
                    this.btn_color = false;
                    return false
                }// 执行注册的逻辑
                let obj = {};
                obj.id = Math.random().toString().slice(2) + "_" + (new Date().getTime());
                obj.username = userName;
                obj.captcha = userCaptcha;

                // 把这个obj对象丢数组中
                sky_users.push(obj);

                // 再把这个数组转成字符串
                let str = JSON.stringify(sky_users);
                localStorage.setItem('SKY_USERS', str);

                // 给用户反馈“注册结果”
                Dialog.alert({
                    message: '注册成功，跳转登录！',
                }).then(() => {
                    // on close
                    // 跳转登录页
                    this.btn_color = true;
                    this.$router.push({ path: '/login' });
                });
            }
        },

        // getColor() {
        //     this.btn_color = true;
        // },
        getTime() {
            let time = 60;
            setInterval(() => {
                time--;
                this.time = time;
            }, 1000)
        }
    },
};
</script>

<style lang="less" scoped>
@import url(../common/less/varible.less);

.register {
    // font-family: @myfont;
    width: 100%;
    padding: 70px 30px;
    height: 660px;
    position: relative;

    h3 {
        padding: 20px 0;
        font-size: 20px;
        font-weight: normal;
        font-family: Arial, Helvetica, sans-serif;
    }

    .van-form {
        position: relative;

        .van-field {
            padding-left: 0;
            padding-right: 0;
            padding-bottom: 2px;
            margin: 15px 0;
            border-bottom: 1px solid #ccc;
        }

        .captcha {
            position: absolute;
            top: 60px;
            right: 0;
            font-size: 14px;
            color: #b7b6b6;
        }
    }

    .message {
        margin-top: 15px;
        margin-bottom: 25px;
        font-size: 12px;

        a {
            color: #939393;
        }
    }

    .other-login {
        width: 100%;
        font-size: 12px;
        text-align: center;
        color: #b7b6b6;
        transform: translateY(80px);

        .box {
            width: 200px;
            margin: 0 auto;

            p {
                margin-bottom: 8px;
            }

            .hr {
                width: 150px;
                display: block;
                border: 1px solid #e6e6e6;
                margin: 0 auto;
            }

            .icon-box {
                width: 100%;
                height: 65px;
                margin: 10px auto;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;

                .icon-qq {
                    background-image: url(../assets/img/QQ.png);
                }

                .icon-weChat {
                    background-image: url(../assets/img/weChat.png);
                }
            }
        }
    }

    footer {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        margin-top: 20px;
        font-size: 13px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: normal;
        text-align: center;
        color: #666;
        line-height: 175%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);

        a {
            color: @bgColor;
        }

        .van-checkbox {
            vertical-align: middle;
            padding-bottom: 2px;
            display: inline-block !important;
        }
    }

}

.icon {
    display: block;
    width: 30px;
    height: 30px;
    background-size: cover;
    margin-bottom: 5px;
}

.van-button--info {
    width: 200px;
    height: 35px;
    background-color: #939393;
    border: 1px solid #939393;
}

.active {
    background-color: @bgColor;
}
</style>